<template>
  <!-- 典型的single-file-components -->
  <router-link
    class="event-link"
    :to="{ name: 'blog-show', params: { id: blogpost.id } }"
  >
    <!-- 通过event.id把id作为params传给router中的id，router再把这个id作为props传给event.show -->
    <div class="event-card -shadow">
      <span class="eyebrow"
        >@ {{ blogpost.time }} on {{ blogpost.date | date }}</span
      >
      <h4 class="title">{{ blogpost.title }}</h4>
      <BaseIcon name="sun" />
      <p>{{ blogpost.description }}</p>
      <el-tag>{{ blogpost.category }}</el-tag>
    </div>
  </router-link>
</template>

<script>
export default {
  props: {
    blogpost: Object,
  },
};
</script>

<style scoped>
.event-card {
  padding: 20px;
  margin-bottom: 24px;
  transition: all 0.2s linear;
  cursor: pointer;
}
.event-card:hover {
  transform: scale(1.01);
  box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.2), 0 1px 15px 0 rgba(0, 0, 0, 0.19);
}
.event-card > .title {
  margin: 0;
}

.event-link {
  color: black;
  text-decoration: none;
  font-weight: 100;
}
</style>
